<template>
	<view>
		<uni-nav-bar :fixed="true" left-icon="back" color="#156DAC" @clickLeft="pageback">
			<view class="header-icon-text-panel">
				<text class="title">资源</text>
				<view style="margin-left: 10upx;" @click="showDrawer">
					<uni-icons type="search" size="16" color="#156DAC"></uni-icons>
				</view>
			</view>
		</uni-nav-bar>
		<view  class="content padding">
			<view class="content_top">
				<view class="uni-form-item uni-column">
					<picker @change="bindPickerChange" :range="alarmTypes">
						<label>类别：</label>
						<view class="alarmTypes">{{ examinationTypeArrayType }}</view>
					</picker>
				</view>
				<view class="queryBtn" @click="queryData(examinationTypeArrayType)">
					查询
				</view>
			</view>
			
			<!-- 列表数据展示 -->
			<view class=" content_list">
				<view class="content_list_item" v-for="(item,i) in listArr" :key='i'>
					<view class="">
						名称: {{item.resourceName}}
					</view>
					<view class="content_list_item_btn">
						<view class="content_list_item_btn_left">
							
						</view>
						<view class="content_list_item_btn_right">
							<view class="download" @click="preview(item.enclosureUrl)">预览</view>
							<view class="download" @click="downloadFile(item.enclosureUrl)">下载</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDict
	} from '@/common/dict.js'

	const getTree = '/base/center/listPage'
	const url = 'https://www.cdlepan.com:7443'
	export default {
		data() {
			return {
				alarmTypes: [],
				typeData: [],
				examinationTypeIndex: 0,
				examinationTypeArrayType: '请选择类别',
				listArr: [],
			};
		},
		onLoad() {
			this.typeData = [{
				code: '',
				codeName: '全部'
			}, ...getDict('e028')]
			this.alarmTypes = [{
				code: '',
				codeName: '全部'
			}, ...getDict('e028')].map(item => item.codeName)
			// this.alarmTypes
			this.queryData('全部')
		},
		methods: {
			pageback() {
				uni.navigateBack({
					delta: 1
				});
			},
			bindPickerChange(e) {
				this.examinationTypeIndex = e.target.value;
				this.examinationTypeArrayType = this.alarmTypes[this.examinationTypeIndex]
			},

			// 查询数据
			queryData(val) {
				console.log(val)
				let value;
				this.typeData.forEach(item => {
					if (item.codeName == val) value = item.code
				})
				this.$api.request(getTree, {
					method: 'get',
					data: {
						resourceType: value
					}
				}).then(res => {
					if (res.code == 200) {
						this.listArr = res.data.list
					}
				}).catch(() => {})
			},

			// 文件下载
			downloadFile(val) {
				console.log(url + val)
				uni.downloadFile({
					url: url + val, //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('下载成功');
							uni.showModal({
								title: '提示',
								content: '这是一个模态弹窗',
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定');
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}
					}
				});
			},

			// 文件预览
			preview(val) {
				uni.openDocument({
				      filePath: url + val,
				      success: function (res) {
				        console.log('打开文档成功');
				      }
				    });
			},
		}
	}
</script>

<style lang="less">
	.content {
		padding: 0 20px;
		box-sizing: border-box;

		.content_top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15px;

			.queryBtn {
				width: 80px;
				height: 26px;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #409eff;
				color: #fff;
				border-radius: 5px;
			}
		}

		.content_list {
			.content_list_item {
				background: #fff;
				margin-bottom: 15px;
				padding: 8px 10px;
				border-radius: 5px;
				box-sizing: border-box;

				.content_list_item_btn {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 10px;

					.content_list_item_btn_right {
						display: flex;

						.download {
							margin-left: 10px;
							width: 60px;
							height: 26px;
							display: flex;
							justify-content: center;
							align-items: center;
							background: #409eff;
							color: #fff;
							border-radius: 5px;
						}

						.preview {
							background: #e6a23c;
						}
					}
				}
			}
		}
	}

	.alarmTypes {
		width: 100px;
		height: 20px;
		border: 1px solid #C0C0C0;
		border-radius: 5px;
		display: inline-block;
		line-height: 20px;
		text-align: center;
	}
</style>
